<template>
  <div style="overflow-y: auto" class="dv">
    首页
    <h1 class="headline load-hidden">Widget Inc.</h1>

    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger" @click="showData">Danger</el-button>
    </el-row>
    <div v-for="item in 30" style="height: 50px" :key="item.id">
      {{ item }}
    </div>
    <!-- <div style="height: 1500px; background-color: aqua"></div> -->
    <h1 class="headline load-hidden">Widget Inc.</h1>
    <p class="tagline">
      The perfect widgets.
      <span class="punchline">Forever.</span>
    </p>
    <div style="height: 500px; background-color: aqua"></div>
  </div>
</template>
<script setup>
import { showDialog } from "./showDialog.js";
import ScrollReveal from "scrollreveal";

const showData = () => {
  showDialog("测试弹窗");
};
onMounted(() => {
  // console.log(document.documentElement);
  ScrollReveal({
    delay: 0,
    distance: "0px",
    duration: 500,
    easing: "cubic-bezier(0.5, 0, 0, 1)",
    interval: 0,
    opacity: 0,
    origin: "left",
    rotate: {
      x: 0,
      y: 0,
      z: 0,
    },
    scale: 1,
    cleanup: false,
    // container: document.documentElement,
    container: document.querySelector(".el-main"),
    desktop: true,
    mobile: true,
    reset: true,
    useDelay: "always",
    viewFactor: 0.0,
    viewOffset: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    },
    afterReset: function (el) {
      console.log("afterReset");
    },
    afterReveal: function (el) {},
    beforeReset: function (el) {},
    beforeReveal: function (el) {
      console.log("beforeReveal");
    },
  }).reveal(".headline", {
    origin: "left",
    viewFactor: 0.5,
    distance: "500px",
  });

  ScrollReveal().reveal(".tagline", { delay: 500 });
});
</script>
<style lang="scss">
.dialog {
  position: fixed;
  top: 200px;
  right: 300px;
}
</style>
